<template>
  <div class="container">
    <Header v-bind:isBack="isBack" v-bind:title="title"></Header>
    <!-- 头部信息 -->
    <div class="top-card" v-if="topMes &&  Object.keys(topMes).length">
      <div class="left">
        <img v-if="status == 4" :src="topMes.user_info.user_avator" alt />
        <img v-else :src="topMes.user_avator" alt />
      </div>
      <div class="right">
        <div class="top">
          <div class="text">
            <span class="name fs-26" v-if="status == 4">{{topMes.user_info.nickname}}</span>
            <span class="name fs-26" v-else>{{topMes.nickname}}</span>
            <span class="time fs-22">{{topMes.add_time || topMes.created_at}}</span>
          </div>
          <div class="btn" @click="concernSomeone(topMes.user_love_id)">
            <img v-if="topMes.is_attention == 1" :src="followed" alt class="followed" />
            <img v-else :src="follow" alt class="follow" />
          </div>
        </div>
        <div
          class="centers fs-28"
        >{{topMes.comments_content || topMes.comments_contents || topMes.content || topMes.comments_words}}</div>
        <div class="bottom">
          <img
            :src="praised"
            alt
            class="praise"
            @click="support()"
            v-if="topMes.is_click == 1 || topMes.is_thumbsUp"
          />
          <img :src="praise" alt class="praise" v-else @click="support()" />
          <span class="num fs-24">{{topMes.good_num || topMes.comment_click_number || 0}}</span>
        </div>
      </div>
    </div>
    <!--  所有评论回复 -->
    <div class="comment">
      <div class="comment-title fs-28">全部回复</div>
      <div class="comment-list" v-if="commentList && commentList.length">
        <div class="items" v-for="(item,index) in commentList" :key="index">
          <div class="left">
            <img :src="item.user_avator" alt />
          </div>
          <div class="right">
            <div class="top">
              <div class="t-left">
                <div class="user-name fs-26">{{item.nickname}}</div>
                <div class="timer">{{item.add_time}}</div>
              </div>
              <div class="t-right">
                <div class="num fs-24">{{item.good_num || item.click_number || 0}}</div>
                <div
                  class="praise"
                  @click="supportReply(item.music_comments_reply_id,item.reply_id,item.music_comments_reply_id)"
                >
                  <img :src="praised" v-if="item.is_click == 1 || item.is_thumbsUp" alt />
                  <img :src="praise" v-else alt />
                </div>
              </div>
            </div>
            <div
              class="centers fs-32"
            >{{item.comments_content || item.comments_contents || item.reply_words || item.reply_text}}</div>
            <div
              class="bottom fs-24"
              v-show="item.reply_num"
              @click="toCommentReply(item.song_sheet_comments_id,item.list_comments_id)"
            >{{item.reply_num}}条回复</div>
          </div>
        </div>
      </div>
      <div class="mes" v-else>还没有评论数据奥</div>
    </div>
    <!-- 发表评论部分 -->
    <div class="send-comment">
      <input type="text" name id placeholder="请填写评论内容..." v-model="desc" />
      <div class="send-btn fs-28" @click="sendComment">发送</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "comment-reply",
  data() {
    return {
      title: "回复",
      isBack: true,
      desc: "", //评论框的内容
      status: 0, //当前的来源  1歌单   3排行榜
      commentId: 0, //当前被查看回复评论的的评论id
      follow: require("@/assets/index/follow.png"),
      followed: require("@/assets/index/followed.png"),
      praise: require("@/assets/index/praise.png"),
      praised: require("@/assets/index/support-mine.png"),
      commentList: [], //评论回复数据
      topMes: {} //头部被查看回复的评论信息
    };
  },
  components: {},
  methods: {
    // 关注某人
    concernSomeone(id) {
      const url = this.$host1 + `home/friend/eachAttention`;
      var params = {
        user_love_id: id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.getSingleSongReply();
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取视频精彩评论的回复数据
    getVideoReply() {
      const url =
        this.$host1 +
        `home/dynamic/lookCommentReply?comment_id=` +
        this.commentId;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data, "---res.data--视频精彩评论回复数据");
          if (res.data.code == 200) {
            this.commentList = res.data.data.result; //result返回的是回复数组
            this.topMes = res.data.data.comment_list; //comment_list返回的是头部信息
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 视屏评论回复里评论的点赞
    supportVideo(id) {
      const url = this.$host1 + `home/dynamic/commentClickRecord`;
      var params = {
        comment_id: id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          // console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.getVideoReply(); //重新调用下获取视频评论回复的接口
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 发送评论信息
    sendComment() {
      console.log(this.desc, "---this.desc");
      console.log(this.status, "---this.status");
      if (this.status == 1) {
        // 表示当前评论的是歌单评论
        this.commentSongSheet();
      } else if (this.status == 2) {
        // 表示当前评论的是专辑评论
        this.commentAlbum();
      } else if (this.status == 3) {
        // 表示当前评论的是排行榜评论
        this.commentRank();
      } else if (this.status == 5) {
        // 表示当前评论的是单曲评论
        this.commentSingleSongReply();
      } else if (this.status == 4) {
        // 表示当前评论的是视频评论
        this.sendReplyComment();
      }
    },
    // 发送回复评论  回复视频评论
    sendReplyComment() {
      const url = this.$host1 + `home/dynamic/replyComment`;
      var params = {
        comment_id: this.commentId,
        reply_text: this.desc
      };
      this.$axios
        .post(url, params)
        .then(res => {
          // console.log(res.data,'---res.data--');
          if (res.data.code == 200) {
            this.desc = "";
            this.getVideoReply(); //重新获取下视频回复评论数据
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 回复-----单曲评论
    commentSingleSongReply() {
      const url = this.$host1 + `home/replyMusicComments`;
      var params = {
        music_comments_id: this.commentId,
        reply_words: this.desc
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.desc = "";
            this.getSingleSongReply(); //重新获取下单曲评论回复列表信息
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 回复专辑评论
    commentAlbum() {
      const url = this.$host1 + `home/replyCommentMusicList`;
      var params = {
        music_list_comments_id: this.commentId,
        reply_words: this.desc
      };
      this.$axios
        .post(url, params)
        .then(res => {
          // console.log(res.data,'---res.data--回复专辑');
          if (res.data.code == 200) {
            this.desc = "";
            this.getAlbumReply(); //重新获取下专辑评论回复的数据
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 回复---歌单评论
    commentSongSheet() {
      const url = this.$host1 + `home/replyCommentSongSheet`;
      var params = {
        song_sheet_comments_id: this.commentId,
        reply_words: this.desc
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.desc = "";
            this.getSongSheetReply();
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 回复----排行榜评论
    commentRank() {
      const url = this.$host1 + `home/replyListComments`;
      var params = {
        list_comments_id: this.commentId,
        reply_words: this.desc
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.desc = "";
            this.getRankReply();
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取歌单评论回复的数据
    getSongSheetReply() {
      const url =
        this.$host1 +
        `home/replyCommentSongSheetList?song_sheet_comments_id=` +
        this.commentId;
      this.$axios
        .get(url)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.commentList = res.data.data.list;
            this.topMes = res.data.data.title;
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取专辑评论回复的数据
    getAlbumReply() {
      const url =
        this.$host1 +
        `home/replyCommentMusicListList?music_list_comments_id=` +
        this.commentId;
      this.$axios
        .get(url)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.commentList = res.data.data.list;
            this.topMes = res.data.data.title;
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取单曲评论回复
    getSingleSongReply() {
      const url =
        this.$host1 +
        `home/replyMusicCommentsList?music_comments_id=` +
        this.commentId;
      this.$axios
        .get(url)
        .then(res => {
          console.log(res.data, "---res.data--单曲评论回复");
          if (res.data.code == 200) {
            this.commentList = res.data.data.list;
            this.topMes = res.data.data.title;
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取排行榜评论回复的数据
    getRankReply() {
      const url =
        this.$host1 +
        `home/replyListCommentsList?music_comments_id=` +
        this.commentId;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.commentList = res.data.data.list;
            this.topMes = res.data.data.title;
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 点赞视频评论回复
    supportVideoReply(id) {
      const url = this.$host1 + `home/dynamic/replyClick`;
      var params = {
        reply_id: id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.getVideoReply(); //重新获取下视频评论回复的数据
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 点赞专辑评论回复
    supportAlbumReply(id) {
      const url = this.$host1 + `home/thumbsUpReplyMusicListComments`;
      var params = {
        mix_id: id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.getAlbumReply();
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 点赞歌单评论回复
    supportSongSheetReply(id) {
      const url = this.$host1 + `home/thumbsUpReplySongSheetComments`;
      var params = {
        mix_id: id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.getSongSheetReply();
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 点赞排行榜评论回复
    supportRankReply(id) {
      const url = this.$host1 + `home/thumbsUpReplyListComments`;
      var params = {
        mix_id: id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.getRankReply();
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 点赞单曲回复
    supportSingleSongReply(id) {
      const url = this.$host1 + `home/thumbsUpReplyMusicComments`;
      var params = {
        mix_id: id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.getSingleSongReply(); //重新获取下单曲回复数据
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 点赞评论回复
    supportReply(id, videoId, albumId) {
      if (this.status == 1) {
        // 表示当前点击的是歌单评论的回复
        var mix_id = id;
        this.supportSongSheetReply(mix_id);
      } else if (this.status == 2) {
        // 表示当前点击的是专辑评论回复
        var mix_id = albumId;
        this.supportAlbumReply(mix_id);
      } else if (this.status == 3) {
        // 表示当前点击的是排行榜评论回复
        var mix_id = id;
        this.supportRankReply(mix_id);
      } else if (this.status == 4) {
        // 表示当前点击的是视频评论回复
        var mix_id = videoId;
        this.supportVideoReply(mix_id);
      } else if (this.status == 5) {
        // 表示当前点击的是单曲评论回复
        var mix_id = albumId;
        this.supportSingleSongReply(mix_id);
      }
    },
    // 点赞评论
    support() {
      console.log(this.status, "---this.status---support");
      console.log(this.commentId, "---commentId");
      if (this.status == 1) {
        // 表示当前点击的是歌单评论列表里面的数据
        var mix_id = this.commentId;
        this.supportSongSheet(mix_id);
      } else if (this.status == 2) {
        // 表示当前点击的是专辑评论回复的评论
        var mix_id = this.commentId;
        this.supportAlbum(mix_id);
      } else if (this.status == 3) {
        // 表示当前点击的是排行榜评论列表里面的数据
        var mix_id = this.commentId;
        this.supportRank(mix_id);
      } else if (this.status == 4) {
        // 表示当前点击的是视频精彩评论回复的评论
        var mix_id = this.commentId;
        this.supportVideo(mix_id);
      } else if (this.status == 5) {
        // 表示当前点击的是单曲评论回复的评论
        var mix_id = this.commentId;
        this.supportSingleSong(mix_id);
      }
    },
    // 点赞单曲列表
    supportSingleSong(id) {
      const url = this.$host1 + `home/thumbsUpMusicComments`;
      var params = {
        mix_id: id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.getSingleSongReply(); //重新获取下单曲评论回复列表信息
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 点赞专辑评论
    supportAlbum(id) {
      const url = this.$host1 + `home/thumbsUpMusicListComments`;
      var params = {
        mix_id: id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          // console.log(res.data,'---res.data--点赞专辑评论');
          if (res.data.code == 200) {
            this.getAlbumReply(); //重新获取下专辑评论回复的数据
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 点赞排行榜评论
    supportRank(id) {
      const url = this.$host1 + `home/thumbsUpListComments`;
      var params = {
        mix_id: id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.getRankReply();
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 点赞歌单评论列表
    supportSongSheet(id) {
      const url = this.$host1 + `home/thumbsUpSongSheetComments`;
      var params = {
        mix_id: id
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.getSongSheetReply();
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    }
  },
  created() {
    this.status = this.$route.query.status;
    if (this.status == 1) {
      // 表示当前是从歌单来的
      this.commentId = this.$route.query.id;
      this.getSongSheetReply();
      // this.songSheetId = this.$route.query.id;
      // this.getSongSheetData();
    } else if (this.status == 2) {
      // 表示当前是从专辑过来的
      this.commentId = this.$route.query.id;
      this.getAlbumReply();
    } else if (this.status == 3) {
      // 表示当前是从排行榜过来的
      this.commentId = this.$route.query.id;
      this.getRankReply();
      // this.list_category_id = this.$route.query.id;
      // this.getRankComment();
    } else if (this.status == 4) {
      // 表示当前是从视频详情点击过来的
      this.commentId = this.$route.query.id;
      this.getVideoReply();
    } else if (this.status == 5) {
      // 表示当前是从单曲点击过来的
      this.commentId = this.$route.query.id;
      this.getSingleSongReply();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container {
  padding-top: 1rem;
  box-sizing: border-box;
  .top-card {
    width: 100%;
    padding: 0.26rem 0.21rem 0.25rem 0.24rem;
    box-sizing: border-box;
    display: flex;
    margin-bottom: 0.22rem;
    background-color: #fff;
    .left {
      img {
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
        margin-right: 0.2rem;
      }
    }
    .right {
      width: 90%;
      .top {
        display: flex;
        justify-content: space-between;
        .text {
          display: flex;
          flex-direction: column;
          margin-top: 0.1rem;
          .name {
            font-weight: 500;
            color: rgba(102, 102, 102, 1);
            margin-bottom: 0.1rem;
          }
          .time {
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
          }
        }
        .btn {
          img {
            width: 1.08rem;
            height: 0.4rem;
          }
        }
      }
      .centers {
        font-weight: 500;
        color: rgba(68, 68, 68, 1);
        margin-top: 0.25rem;
        display: flex;
      }
      .bottom {
        display: flex;
        flex-direction: row-reverse;
        .num {
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          margin-right: 0.18rem;
        }
        img {
          width: 0.24rem;
          height: 0.26rem;
        }
      }
    }
  }

  //评论回复部分的样式
  .comment {
    background-color: #fff;
    padding: 0.21rem 0 0.3rem;
    box-sizing: border-box;
    .comment-title {
      font-weight: bold;
      color: rgba(68, 68, 68, 1);
      padding: 0 0.24rem;
      padding-bottom: 0.3rem;
      box-sizing: border-box;
      margin-bottom: 0.33rem;
      border-bottom: 0.01rem solid #e9e9e9;
    }
    .comment-list {
      padding: 0 0.24rem;
      padding-bottom: 0.3rem;
      box-sizing: border-box;
      .items {
        display: flex;
        margin-bottom: 0.33rem;
        .left {
          margin-right: 0.2rem;
          img {
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 50%;
          }
        }
        .right {
          width: 100%;
          .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.27rem;
            .t-left {
              .user-name {
                font-weight: 500;
                color: rgba(102, 102, 102, 1);
                line-height: 0.32rem;
              }
              .timer {
                font-size: 0.22rem;
                font-weight: 400;
                color: rgba(153, 153, 153, 1);
                line-height: 0.32rem;
              }
            }
            .t-right {
              display: flex;
              .num {
                margin-right: 0.2rem;
                font-weight: 400;
                color: rgba(102, 102, 102, 1);
              }
              .praise {
                width: 0.24rem;
                height: 0.26rem;
                img {
                  width: 100%;
                }
              }
            }
          }
          .centers {
            text-align: left;
            font-weight: 500;
            color: rgba(68, 68, 68, 1);
            line-height: 0.48rem;
          }
          .bottom {
            margin-top: 0.31rem;
            font-weight: 500;
            color: rgba(56, 117, 209, 1);
            line-height: 0.32;
          }
          .bottom::after {
            content: ">";
            font-size: 0.28rem;
            margin-left: 0.1rem;
            color: rgba(56, 117, 209, 1);
          }
        }
      }
    }

    .mes {
      color: #999999;
    }
  }

  // 发表评论部分
  .send-comment {
    width: 100%;
    height: 0.89rem;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.24rem;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: 0;
    input {
      width: 85%;
      height: 100%;
    }
    input::-webkit-input-placeholder {
      font-size: 0.28rem;
      color: #999999;
    }
    .send-btn {
      font-weight: bold;
      color: rgba(84, 4, 121, 1);
    }
  }
}
</style>
